<template>
	<view>
		<!-- 顶部导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-icon" @click="goBack">
					<uni-icons type="left" size="20"></uni-icons>
				</view>
				<text class="title">已售商品</text>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 顶部搜索栏 -->
			<view class="search-container">
				<view class="search-box">
					<view class="search-icon-left">
						<uni-icons type="search" size="16" color="#999"></uni-icons>
					</view>
					<input type="text" v-model="searchText" placeholder="搜索已售商品" confirm-type="search"
						@confirm="searchGoods" />
					<view class="search-icon" @click="searchGoods">
						<uni-icons type="search" size="16" color="#2979ff"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 商品列表 -->
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in soldGoodsList" :key="index">
					<image :src="item.image" class="goods-image"></image>
					<view class="goods-info">
						<view class="goods-title">{{item.title}}</view>
						<view class="goods-desc">{{item.description}}</view>
						<view class="price-row">
							<text class="goods-price">¥{{item.price}}</text>
						</view>
						<view class="order-time">成交时间: {{item.soldTime}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				searchText: '',
				soldGoodsList: [],
				loading: false,
				supplierCompanyId: 0
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 搜索商品
			searchGoods() {
				this.getSoldGoods()
			},

			// 统一请求处理方法
			async request(url, method = 'GET', data = {}) {
				try {
					const res = await uni.request({
						url: this.baseUrl + url,
						method,
						data
					});
					
					if (res.statusCode === 200 && res.data.errno === 0) {
						return res.data.data;
					}
					throw new Error(res.data.errmsg || '请求失败');
				} catch (e) {
					uni.showToast({
						title: e.message || '网络异常',
						icon: 'none'
					});
					return null;
				}
			},

			// 获取公司ID并加载商品列表
			async getBuyerCompanyId() {
				const userId = uni.getStorageSync("userInfo").id;
				const companyInfo = await this.request(
					`/wx/companyInfo/getCompanyInfo`,
					'GET',
					{ userId }
				);
				
				if (companyInfo) {
					this.supplierCompanyId = companyInfo.id;
					await this.getSoldGoods();
				}
			},

			// 获取已售商品列表
			async getSoldGoods() {
				if (this.loading) return;
				this.loading = true;
				
				const data = await this.request(
					`/wx/order/sold/${this.supplierCompanyId}`,
					'GET',
					{ keyword: this.searchText }
				);
				
				if (data) {
					this.soldGoodsList = data;
				}
				
				this.loading = false;
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight
			this.getBuyerCompanyId()

		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getSoldGoods().then(() => {
				uni.stopPullDownRefresh()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		z-index: 999;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);

		.nav-content {
			height: 44px;
			display: flex;
			align-items: center;
			position: relative;

			.back-icon {
				padding: 0 15px;
				height: 100%;
				display: flex;
				align-items: center;
			}

			.title {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 17px;
				font-weight: 600;
				color: #333;
			}
		}
	}

	.content {
		padding-top: calc(var(--status-bar-height) + 44px);
		background-color: #f8f8f8;
		min-height: 100vh;
	}

	.search-container {
		padding: 12px 16px;
		background-color: #fff;
		border-bottom: 1px solid #f0f0f0;

		.search-box {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			padding: 8px 12px;
			border-radius: 8px;

			.search-icon-left {
				margin-right: 8px;
				color: #999;
			}

			input {
				flex: 1;
				font-size: 14px;
				padding-right: 8px;
				color: #333;

				&::placeholder {
					color: #999;
				}
			}

			.search-icon {
				padding: 5px;
				cursor: pointer;
			}
		}
	}

	.goods-list {
		padding: 12px;

		.goods-item {
			display: flex;
			padding: 16px;
			background-color: #fff;
			margin-bottom: 12px;
			border-radius: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

			.goods-image {
				width: 90px;
				height: 90px;
				border-radius: 8px;
				object-fit: cover;
			}

			.goods-info {
				flex: 1;
				margin-left: 16px;
				display: flex;
				flex-direction: column;
				position: relative;

				.goods-title {
					font-size: 16px;
					color: #333;
					margin-bottom: 10px;
					font-weight: 500;
					line-height: 1.5;
					letter-spacing: 0.3px;
					padding-right: 80px;
				}

				.goods-desc {
					font-size: 14px;
					color: #666;
					margin-bottom: 12px;
					line-height: 1.6;
					letter-spacing: 0.2px;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					padding-right: 80px;
				}

				.price-row {
					position: absolute;
					right: 0;
					top: 0;
					margin-bottom: 0;

					.goods-price {
						font-size: 18px;
						color: #ff4b4b;
						font-weight: 600;
						letter-spacing: 0.5px;
					}
				}

				.order-time {
					font-size: 13px;
					color: #999;
					display: flex;
					align-items: center;
					letter-spacing: 0.2px;
					line-height: 1.4;
				}
			}
		}
	}
</style>